<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>钻石转移</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/mui.min.js"></script>
  <script>
    var width = window.localStorage.getItem('width');
    document.documentElement.style.fontSize = width ? width / 6.4 + 'px' : '55px';
  </script>
  <script src="../config.js"></script>
  <style>
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      touch-action: none;
      overflow-x: hidden;
      overflow-y: auto;
      font-size: 0.28rem;
      background-color: #F2F2F2;
    }

    #app {
      width: 100%;
      padding-top: 10%;
    }

    .inputRowWrap {
      width: 96%;
      margin: 0 auto 0.3rem;
      display: flex;
      /*justify-content: space-between;*/
      align-items: center;
      height: 1rem;

    }

    .inputLabel {
      height: 0.6rem;
      font-size: 0.26rem;
      line-height: 0.6rem;
    }
    .inputBox {
      width: 2.5rem;
      height: 0.6rem;
      font-size: 0.26rem;
      border: none;
      border-radius: 5px;
      padding-left: 10px;
      margin: 0 0.2rem;
    }

    .scanImg {
      width: 0.5rem;
    }

    .nextBtn {
      color: white;
      background: rgb(255, 152, 0);
      height: 1rem;
      width: 50%;
      margin: 0.5rem auto 0;
      /*padding: 0.15rem 0 ;*/
      font-size: 0.3rem;
      line-height: 1rem;
      border-radius: 0.2rem;
      text-align: center;
    }

  </style>
</head>
<body>
<div id="app">

  <div class="inputRowWrap">
    <p class="inputLabel">转移钻石会员ID：</p>
    <input class="inputBox" type="number" v-model="oldUserId"/>
    <img src="../images/scancode_ff8900.png" alt="" class="scanImg" @click="toScanCode('old')"/>
  </div>
  <div class="inputRowWrap">
    <p class="inputLabel">接收钻石会员ID：</p>
    <input class="inputBox" type="number" v-model="newUserId"/>
    <img src="../images/scancode_ff8900.png" alt="" class="scanImg" @click="toScanCode('new')"/>
  </div>
  <div class="nextBtn" @click="toDiamondTransferConfirm">下一步</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        oldUserId: '',//转移钻石用户id
        newUserId: '',//接收钻石用户id
      }
    },
    created: function () {
      var vm = this
      mui.init();
      mui.plusReady(function () {
        vm.receiveParams();
      })
    },
    mounted: function () {
      this.bindAction();
    },
    methods: {
      receiveParams: function () {
        var self = plus.webview.currentWebview();
        var vm = this

      },
      bindAction: function () {
        var vm = this;
        window.addEventListener('oldUserIdDiamondTransfer', function (event) {
          vm.oldUserId =200000000+parseInt(event.detail.userId) ;
        });
        window.addEventListener('newUserIdDiamondTransfer', function (event) {
          vm.newUserId = 200000000+parseInt(event.detail.userId) ;
        });
      },
      toScanCode:function (type) {
        // console.log(type);
        mui.openWindow({
          url: '../common/scancodeDiamondTransfer.html',
          id: 'scancodeDiamondTransfer',
          styles: {
            titleNView: {
              titleText: '扫码',
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            userType:type
          }
        });
      },
      toDiamondTransferConfirm: function () {
        var vm = this;
        if (vm.oldUserId && vm.newUserId) {
          mui.openWindow({
            url: 'diamondTransferConfirm.html',
            id: 'diamondTransferConfirm',
            styles: {
              titleNView: {
                titleText: '钻石转移',
                titleColor: "#FFFFFF",
                titleSize: "14px",
                backgroundColor: "#FF6800",
                autoBackButton: true,
                splitLine: {
                  color: "#CCCCCC",
                  height: "1px"
                }
              }
            },
            extras: {
              oldUser: vm.oldUserId,
              newUser: vm.newUserId,
            }
          });
        } else {
          mui.toast('请输入会员ID');
        }
      },


    },

  })
</script>
</body>
</html>